<template>
  <el-switch v-bind="$attrs" :size="size" :inactive-icon="handleIcon.inactive" :active-icon="handleIcon.active">
    <template v-for="name in Object.keys($slots)" #[name]>
      <slot :name="name"></slot>
    </template>
  </el-switch>
</template>
<script setup lang="ts">
import { PropType, computed, Component } from 'vue'
import { useDiscMinSvg } from '@/hooks/index'

defineOptions({ name: 'XuSwitch' })
let props = defineProps({
  inactiveIcon: {
    type: [Object, String] as PropType<Component | string>,
  },
  activeIcon: {
    type: [Object, String] as PropType<Component | string>,
  },
  size: {
    type: String as PropType<'default' | 'large' | 'small'>,
    default: 'default',
  },
})

type Obj = {
  inactive?: string | Component
  active?: string | Component
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
function isComponent(obj: any): obj is Component {
  return obj && typeof obj.render === 'function'
}
const handleIcon = computed(() => {
  let obj: Obj = {}
  function check(value: unknown, name: keyof Obj) {
    if (typeof value === 'string') {
      let { component } = useDiscMinSvg(value, props.size)
      obj[name] = component
    } else if (isComponent(value)) obj[name] = value
  }

  check(props.activeIcon, 'active')
  check(props.inactiveIcon, 'inactive')
  return obj
})
</script>
<style lang="scss" scoped>
.el-switch--large {
  :deep(.el-icon) {
    font-size: 18px;
  }
}

.el-switch--small {
  :deep(.el-icon) {
    font-size: 14px;
  }
}

.el-switch--default {
  :deep(.el-icon) {
    font-size: 16px;
  }
}
</style>
